<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            /* width: 100px;
            height: 100px;
            background-color: red; */
            /* transition 的第一个参数是要进行动画的css属性 all表示所有的属性
            第二个参数是动画执行过程的时间
            第三个是动画执行的状态
            第四个是动画执行的延迟时间
             */
            /* transition: width 1s linear 0s; */

            /* animation: myAni 1s linear 2s infinite forwards; */
        }

        /* div:hover {
            width: 300px;
            height: 300px;
            background-color: green;
        } */
        /* @keyframes myAni {
            0% {
                transform: translate(0px);
            }50% {
                transform: translate(200px);
            } 100% {
                transform: translate(400px);
            }

        } */
    </style>
</head>
<body>
    <!-- <div></div> -->
    <!-- 
        h5: 语义化标签/增强性表单 type="date" type="search" type="color" type="reset" type="range"
        地理定位/dragable/canvas/音视频/web存储
        css3: 选择器nth-系列 属性选择器 border-shadow text-shadow background-image: url() url() url() ...
        border-image  动画（过渡动画和动画）
     -->
     <!-- <input type="range" max="100" value="50"> -->
     <div draggable="true">这是要拖拽的元素</div>
</body>
</html>